<template>
	<view class="webview-container">
		<web-view v-if="showWebview" :src="paymentUrl" @message="handleMessage" @error="handleError" @load="handleLoad"></web-view>
		<view v-if="errorOccurred" class="error-container">
			<view class="error-icon">!</view>
			<text class="error-text">{{ errorMessage }}</text>
			<button class="retry-btn" @tap="goBack">返回</button>
		</view>
	</view>
</template>

<script>
import request from '@/utils/request.js'
import { payApi } from '@/api/pay.js'

export default {
	data() {
		return {
			paymentUrl: '',
			loadTimeout: null,
			orderNo: '',
			redirectTimer: null,
			checkPaymentTimer: null,
			showWebview: true,
			errorOccurred: false,
			errorMessage: '支付遇到问题，请稍后再试'
		}
	},
	
	onLoad(options) {
		console.log('webview onLoad options:', options);

		try {
			if (options.payUrl) {
				// 新的支付URL参数处理
				this.orderNo = options.orderNo;
				this.paymentUrl = decodeURIComponent(options.payUrl);
				console.log('使用payUrl参数，支付URL:', this.paymentUrl);

				// 如果有订单号，启动轮询检查支付状态
				if (this.orderNo) {
					this.startCheckingPaymentStatus();
				}

				this.loadTimeout = setTimeout(() => {
					this.cleanup();
					this.handlePaymentError('支付页面加载超时', false);
				}, 30000);
			} else if (options.html) {
				// 兼容旧的HTML参数处理
				this.orderNo = options.orderNo;

				try {
					// 尝试进行Base64解码
					let decodedHtml;
					try {
						if (uni.base64Decode) {
							// 如果平台支持base64Decode
							decodedHtml = uni.base64Decode(options.html);
						} else {
							// 否则使用通用方法
							decodedHtml = decodeURIComponent(atob(options.html));
						}
						console.log('Base64解码成功');
					} catch (e) {
						// 如果Base64解码失败，尝试URL解码
						console.log('Base64解码失败，尝试URL解码');
						decodedHtml = decodeURIComponent(options.html);
					}

					console.log('解码后的HTML:', decodedHtml.substring(0, 200) + '...');

					// 从HTML中提取支付URL
					const urlMatch = decodedHtml.match(/action="([^"]+)"/);
					if (urlMatch && urlMatch[1]) {
						this.paymentUrl = urlMatch[1];
						console.log('已从form中提取支付URL:', this.paymentUrl);
					} else {
						// 尝试提取沙箱URL
						const sandboxMatch = decodedHtml.match(/(https:\/\/openapi-sandbox\.dl\.alipaydev\.com[^"'\s]+)/);
						if (sandboxMatch && sandboxMatch[0]) {
							this.paymentUrl = sandboxMatch[0];
							console.log('已从内容中提取沙箱URL:', this.paymentUrl);
						} else {
							// 如果没有找到任何URL，创建data URL
							console.log('未找到URL，创建data URL');
							this.paymentUrl = 'data:text/html;charset=utf-8,' + encodeURIComponent(decodedHtml);
						}
					}

					console.log('最终设置的paymentUrl:', this.paymentUrl);

					// 如果有订单号，启动轮询检查支付状态
					if (this.orderNo) {
						this.startCheckingPaymentStatus();
					}
				} catch (error) {
					console.error('处理支付URL时发生错误:', error);
					this.handlePaymentError('加载支付页面失败', false);
					return;
				}

				this.loadTimeout = setTimeout(() => {
					this.cleanup(); // 清理所有定时器
					this.handlePaymentError('支付页面加载超时', false);
				}, 30000);
			} else if (options.content) {
				// 兼容旧版本参数名
				try {
					const decodedHtml = decodeURIComponent(options.content);
					this.paymentUrl = decodedHtml;
					console.log('使用content参数设置paymentUrl');
					
					// 尝试从URL中提取orderNo
					const orderNoMatch = this.paymentUrl.match(/orderNo=([^&]+)/);
					if (orderNoMatch && orderNoMatch[1]) {
						this.orderNo = orderNoMatch[1];
						console.log('从URL提取订单号:', this.orderNo);
						this.startCheckingPaymentStatus();
					}
					
					this.loadTimeout = setTimeout(() => {
						this.cleanup(); // 清理所有定时器
						this.handlePaymentError('支付页面加载超时', false);
					}, 30000);
				} catch (error) {
					console.error('处理支付URL时发生错误:', error);
					this.handlePaymentError('加载支付页面失败', false);
				}
			} else {
				console.error('缺少必要参数');
				this.handlePaymentError('支付参数错误', false);
			}
		} catch (error) {
			console.error('webview加载时发生错误:', error);
			this.handlePaymentError('加载时出现错误', false);
		}
	},
	
	onUnload() {
		this.cleanup();
	},
	
	// 添加返回按钮处理方法
	onBackPress() {
		// 调用goBack方法，显示模态框让用户选择去向
		this.goBack();
		return true; // 返回true表示阻止默认返回行为
	},
	
	methods: {
		// 开始轮询检查支付状态
		startCheckingPaymentStatus() {
			console.log('开始检查支付状态，订单号:', this.orderNo);
			
			// 每3秒检查一次支付状态
			this.checkPaymentTimer = setInterval(() => {
				this.checkPaymentStatus();
			}, 3000);
		},
		
		// 检查支付状态
		async checkPaymentStatus() {
			if (!this.orderNo) return;
			
			try {
				console.log('检查订单支付状态:', this.orderNo);
				const res = await payApi.queryPayStatus(this.orderNo);
				
				if (res && res.code === 200 && res.data) {
					console.log('支付状态查询结果:', res.data);
					
					// 如果订单已支付
					if (res.data.paid || res.data.status === 'TRADE_SUCCESS' || res.data.status === 'TRADE_FINISHED') {
						console.log('检测到订单已支付');
						this.handlePaymentSuccess();
					}
				}
			} catch (error) {
				console.error('查询支付状态出错:', error);
				// 查询出错不显示给用户，继续尝试
			}
		},
		
		handleLoad(event) {
			console.log('webview加载完成:', event);
			if (this.loadTimeout) {
				clearTimeout(this.loadTimeout);
			}
		},
		
		handleMessage(event) {
			console.log('收到消息:', event.detail);
			const { data } = event.detail;
			
			if (data.type === 'success' || data.type === 'payment_success') {
				this.handlePaymentSuccess();
			} else if (data.type === 'fail' || data.type === 'payment_fail') {
				this.handlePaymentError('支付失败', true);
			}
		},
		
		handleError(error) {
			console.error('webview错误:', error);
			// 清理所有定时器
			this.cleanup();
			// 隐藏webview，显示友好的错误界面
			this.showWebview = false;
			this.errorOccurred = true;
			this.errorMessage = '支付页面加载失败，请返回重试';
		},
		
		handlePaymentSuccess() {
			// 清理定时器
			this.cleanup();
			
			// 记录订单已支付状态
			if (this.orderNo) {
				try {
					// 获取已支付订单记录
					const paidOrdersStr = uni.getStorageSync('paidOrders') || '{}';
					const paidOrders = JSON.parse(paidOrdersStr);
					
					// 添加当前订单并记录支付时间
					paidOrders[this.orderNo] = {
						paid: true,
						time: new Date().getTime()
					};
					
					// 保存回本地存储
					uni.setStorageSync('paidOrders', JSON.stringify(paidOrders));
					console.log('已记录订单支付状态:', this.orderNo);
				} catch (error) {
					console.error('记录订单支付状态失败:', error);
				}
			}
			
			// 显示支付成功提示
			uni.showToast({
				title: '支付成功',
				icon: 'success'
			});
			
			// 2秒后自动跳转到订单列表页
			this.redirectTimer = setTimeout(() => {
				console.log('准备跳转到订单列表页');
				// 使用switchTab直接跳转到订单选项卡（如果是tabBar页面）
				try {
					uni.switchTab({
						url: '/pages/orders/list',
						success: () => {
							console.log('switchTab到订单列表页成功');
						},
						fail: (err) => {
							console.error('switchTab失败，尝试redirectTo:', err);
							// 如果不是tabBar页面，尝试使用redirectTo
							uni.redirectTo({
								url: '/pages/orders/list',
								success: () => {
									console.log('redirectTo到订单列表页成功');
								},
								fail: (err2) => {
									console.error('redirectTo也失败，尝试navigateTo:', err2);
									// 最后尝试使用navigateTo
									uni.navigateTo({
										url: '/pages/orders/list',
										fail: (err3) => {
											console.error('所有跳转方法都失败，返回首页:', err3);
											// 实在不行就回首页
											uni.switchTab({
												url: '/pages/index/index'
											});
										}
									});
								}
							});
						}
					});
				} catch (error) {
					console.error('跳转过程中发生异常:', error);
					// 出现异常时尝试返回首页
					uni.switchTab({
						url: '/pages/index/index'
					});
				}
			}, 2000);
		},
		
		handlePaymentError(message, showToast = true) {
			this.cleanup();
			
			if (showToast) {
				uni.showToast({
					title: message,
					icon: 'none'
				});
				
				// 显示模态框，提供查看订单或返回首页的选项
				setTimeout(() => {
					uni.showModal({
						title: '支付提示',
						content: '您可以查看订单或返回首页',
						cancelText: '返回首页',
						confirmText: '查看订单',
						success: (res) => {
							if (res.confirm) {
								// 跳转到订单列表
								uni.navigateTo({
									url: '/pages/orders/list',
									fail: () => {
										uni.switchTab({
											url: '/pages/index/index'
										});
									}
								});
							} else {
								// 返回首页
								uni.switchTab({
									url: '/pages/index/index'
								});
							}
						}
					});
				}, 1000);
			} else {
				// 不显示toast，而是显示友好的错误界面
				this.showWebview = false;
				this.errorOccurred = true;
				this.errorMessage = message || '支付过程中遇到问题';
			}
		},
		
		goBack() {
			// 显示模态框，提供查看订单或返回首页的选项
			uni.showModal({
				title: '返回提示',
				content: '您要查看订单还是返回首页？',
				cancelText: '返回首页',
				confirmText: '查看订单',
				success: (res) => {
					if (res.confirm) {
						// 跳转到订单列表
						uni.navigateTo({
							url: '/pages/orders/list',
							fail: () => {
								uni.switchTab({
									url: '/pages/index/index'
								});
							}
						});
					} else {
						// 返回首页
						uni.switchTab({
							url: '/pages/index/index'
						});
					}
				}
			});
		},
		
		cleanup() {
			if (this.loadTimeout) {
				clearTimeout(this.loadTimeout);
				this.loadTimeout = null;
			}
			if (this.redirectTimer) {
				clearTimeout(this.redirectTimer);
				this.redirectTimer = null;
			}
			if (this.checkPaymentTimer) {
				clearInterval(this.checkPaymentTimer);
				this.checkPaymentTimer = null;
			}
		}
	}
}
</script>

<style>
.webview-container {
	width: 100%;
	height: 100vh;
	position: relative;
}

.error-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 40rpx;
	background-color: #fff;
}

.error-icon {
	width: 120rpx;
	height: 120rpx;
	border-radius: 60rpx;
	background-color: #ff5252;
	color: white;
	font-size: 80rpx;
	font-weight: bold;
	text-align: center;
	line-height: 120rpx;
	margin-bottom: 40rpx;
}

.error-text {
	font-size: 32rpx;
	color: #666;
	text-align: center;
	margin-bottom: 60rpx;
}

.retry-btn {
	width: 400rpx;
	height: 80rpx;
	line-height: 80rpx;
	background-color: #1890ff;
	color: #fff;
	border-radius: 40rpx;
	font-size: 30rpx;
}
</style> 